<template>
    <el-dialog
      v-model="internalVisible"
      :title="title"
      :width="width"
      :close-on-click-modal="closeOnClickModal"
      :show-close="showClose"
    >
      <!-- 内容插槽，提供最大灵活性 -->
      <slot name="default">
        <!-- 默认内容，当没有插槽时显示 -->
        <span>{{ content }}</span>
      </slot>
  
      <template #footer>
        <div class="dialog-footer">
          <slot name="footer">
            <!-- 默认底部按钮 -->
            <el-button @click="handleCancel">{{ cancelText }}</el-button>
            <el-button type="primary" @click="handleConfirm" :loading="confirmLoading">
              {{ confirmText }}
            </el-button>
          </slot>
        </div>
      </template>
    </el-dialog>
  </template>
  
  <script setup lang="ts">
  import { computed } from 'vue'
  
  interface Props {
    modelValue: boolean
    title?: string
    width?: string | number
    content?: string
    confirmText?: string
    cancelText?: string
    confirmLoading?: boolean
    closeOnClickModal?: boolean
    showClose?: boolean
  }
  
  const props = withDefaults(defineProps<Props>(), {
    title: '提示',
    width: '500px',
    content: '',
    confirmText: '确认',
    cancelText: '取消',
    confirmLoading: false,
    closeOnClickModal: false,
    showClose: true
  })
  
  const emit = defineEmits<{
    'update:modelValue': [value: boolean]
    'confirm': []
    'cancel': []
  }>()
  
  // 使用计算属性实现 v-model 双向绑定
  const internalVisible = computed({
    get: () => props.modelValue,
    set: (value: boolean) => emit('update:modelValue', value)
  })
  
  const handleConfirm = () => {
    emit('confirm')
  }
  
  const handleCancel = () => {
    emit('cancel')
  }
  </script>